<template>
  <div class="app">
    <div class="header">
        <div class="head">首页</div>
    </div>
    <div class="con">
        <div class="name">李华超市回龙观店<i class="iconfont icon-xiajiankuohao"></i></div>
        <div class="img">
            <img src="https://i.loli.net/2019/03/04/5c7ceaed9743b.png" alt="">
        </div>
        <div class="slogan">欢迎光临本店,本店新开张,诚信经营!</div>
        <div class="search">
            <router-link to = "/delivery">
                <div class="site">
                    <i class="iconfont icon-weizhi i"></i>
                    <p class = "p">请选择配送地址 ></p>
                </div>
            </router-link>
            
            <input type="text" placeholder="搜索商品">
            <i class="iconfont icon-fangdajing"></i>
        </div>
    </div>
    <ul class="title">
        <li :class="{'tit':num1==index}" v-for="(i,index) in data" :key="index" @click="active(index)">{{i.name}}<i :class="i.icon"></i></li>
    </ul>
    <div class="list">
        <div class="list_left" ref="aa">
            <ul>
                <li v-for="(i,index) in list" :key="index" @click="get(index)" :class="{'change':num==index}">{{i.name}}</li>
            </ul>
        </div>
        <div class="list_right" ref="bb">
            <ul>
                <li v-for="(i,index) in con" :key="index">
                    <div class="right_left">
                        <img :src="i.img" alt="">
                    </div>
                    <div class="right_right">
                        <p>{{i.p1}}</p>
                        <p>{{i.p2}}</p>
                        <p>{{i.p3}}</p>
                        <p><span>￥</span><i>{{i.p4}}</i><span>.99</span></p>
                        <p><img :src="i.img2" alt="">{{i.span5}}</p>
                    </div>
                </li>
            </ul>
        </div>
        
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    data(){
        return{
            data:[
                {name:'综合'},
                {name:'销量'},
                {name:'价格',icon:"iconfont icon-downsale"}
            ],
            list:[
                {name:"全部"},
                {name:"日用百货"},
                {name:"文具用品"},
                {name:"食品生鲜"},
                {name:"图书音像"},
                {name:"母婴童装"},
                {name:"玩具乐器"},
                {name:"全部"},
                {name:"日用百货"},
                {name:"文具用品"},
                {name:"食品生鲜"},
                {name:"图书音像"},
                {name:"母婴童装"},
                {name:"玩具乐器"}
            ],
            con:[
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"},
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"},
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"},
                {img:"../../static/img/WechatIMG292.png",p1:"高夫男士护肤品套装洗面",p2:"控油补水保湿去黑头洁...",p3:"500ml",p4:"467",img2:"../../static/img/购物车.png"}
            ],
            foot:[
                {icon:"iconfont icon-tabhome",sy:'首页'},
                {icon:"iconfont icon-qicheqianlian-1",sy:'购物车'},
                {icon:"iconfont icon-paper-industry",sy:'订单'},
                {icon:"iconfont icon-user-circle-o",sy:'我的'}
            ],
            num:0,
            num1:0
        }
    },
    methods:{
        get(index){
            this.num=index;
        },
        active(index){
            this.num1=index;
        }
    },
    mounted(){
        this.list_left = new BScroll(this.$refs.aa,{
            click:true
        });
        this.list_right = new BScroll(this.$refs.bb,{
            click:true
        });
    }
}

</script>
<style scoped lang="scss">
    .change{
        background: #fff;
    }
    .header{
        .head{
            height:0.44rem;
            font-size:0.18rem;
            text-align: center;
            line-height: 0.44rem;
        }
    }
    .con{
        overflow: hidden;
        height:2.04rem;
        background-image: linear-gradient(-120deg, #F46839 0%, #DD3333 56%);
        .name{
            width:3.19rem;
            height:0.3rem;
            background: rgba(255,255,255,0.10);
            border-radius: 20px;
            font-size:0.14rem;
            margin:0 auto;
            text-align: center;
            line-height: 0.3rem;
            font-family: PingFangSC-Regular;
            color: #FFFFFF;
            letter-spacing: -0.28px;
            margin-top:0.1rem;
        }
        .img{
            width:0.6rem;
            height:0.6rem;
            background:#fff;
            border-radius: 30px;
            margin:0 auto;
            margin-top:0.16rem;
            position: relative;
            img{
                width:0.42rem;
                height:0.42rem;
                position: absolute;
                left: 15%;
                top: 15%;
            }
        }
        .slogan{
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: -0.28px;
            line-height: 14px;
            text-align: center;
            margin-top:0.1rem;
        }
        .search{
            margin-top: 0.21rem;
            height:0.44rem;
            background: rgba(0,0,0,0.10);
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: relative;
            .site{
                width:1.38rem;
                height:0.3rem;
                background: #fff;
                border-radius:0.15rem;
                position: relative;
                .i{
                    position: absolute;
                    top:0.06rem;
                    left:0.1rem;
                }
                .p{
                    font-family: PingFangSC-Regular;
                    font-size: 0.12rem;
                    color: #333333;
                    letter-spacing: -0.35px;
                    line-height: 0.3rem;
                    margin-left: 0.15rem;
                    text-align: center;
                }
            }
            input{
                width:1.99rem;
                height:0.3rem;
                border-style: none;
                outline: none;
                border-radius:0.15rem;
                font-family: PingFangSC-Regular;
                font-size: 0.12rem;
                color: #CCCCCC;
                letter-spacing: -0.3px;
                line-height: 0.3rem;
                text-indent: 0.12rem
            }
            i{
                position: absolute;
                right: 0.2rem;
                top: 0.13rem;
            }
        }
    }
    .title{
        height:0.44rem;
        display: flex;
        justify-content:space-around;
        align-items: center;
        position: relative;
        &::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 0.01rem;
            background: #F2F1F6;
            width: 100%;
            transform: scale(1, 0.5);
        }
        li{
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #333333;
            letter-spacing: -0.41px;
            line-height: 0.14rem;
            position: relative;
            i{
                position: absolute;
                top:0;
                left:0.3rem;
            }
        }
        .tit{
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #DD3333;
            letter-spacing: -0.41px;
            line-height: 0.14rem;
            position: relative;
            &::after{
                content: "";
                position: absolute;
                bottom:-100%;
                left: 0;
                border-bottom: 2px solid #DD3333;
                width: 100%;
            }
        }

    }
    .list{
        display:flex;
        position: absolute;
        top: 3.12rem;
        bottom: 0.49rem;
        overflow: hidden;
        .list_left{
            width:0.9rem;
            background: #F2F2F2;
            ul{
                li{
                    height: 0.44rem; 
                    font-family: PingFangSC-Regular;
                    font-size: 0.14rem;
                    color: #333333;
                    letter-spacing: -0.36px;
                    line-height: 0.44rem;
                    text-align: center;
                }
            }
        }
        .list_right{
            flex:1;
            ul{
                li{
                    display: flex;
                    box-sizing: border-box;
                    padding: 0.12rem 0.14rem 0.1rem 0.14rem;
                    .right_left{
                        width:0.8rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img{
                            width:0.8rem;
                            height:0.8rem;
                        }
                    }
                    .right_right{
                        flex:1;
                        font-size:0.14rem;
                        margin-left: 0.1rem;
                        position: relative;
                        p{
                            &:nth-of-type(1){
                                font-family: PingFangSC-Regular;
                                font-size: 0.14rem;
                                color: #333333;
                                letter-spacing: 0;
                                line-height: 0.14rem;
                            }
                            &:nth-of-type(2){
                                font-family: PingFangSC-Regular;
                                font-size: 0.14rem;
                                color: #333333;
                                letter-spacing: 0;
                                line-height: 0.14rem;
                                margin-top:0.025rem;
                            }
                            &:nth-of-type(3){
                                font-family: PingFangSC-Regular;
                                font-size: 0.12rem;
                                color: #999999;
                                letter-spacing: 0;
                                line-height: 0.12rem;
                                margin-top:0.06rem;
                            }
                            &:nth-of-type(4){
                                font-family: PingFangSC-Regular;
                                font-size: 0.12rem;
                                color: #DD3333;
                                letter-spacing: -0.007rem;
                                line-height: 0.16rem;
                                margin-top:0.15rem;
                                i{
                                    font-family: PingFangSC-Regular;
                                    font-size: 0.16rem;
                                    letter-spacing: -0.007rem;
                                    line-height: 0.16rem;
                                }
                            }
                            &:nth-of-type(5){
                                position: absolute;
                                width:0.28rem;
                                height:0.28rem;
                                right:0px;
                                bottom:0px;
                                border-radius:0.15rem;
                                border: 1px solid #999999;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                img{
                                    width:0.18rem;
                                    height:0.18rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
</style>